<template>
  <div>
    <h3>{{$route.query}}</h3>
    <h3>Vuex</h3>
    <button>刘德华:{{$store.state.liuDeHua}}|{{liu}}</button>
    <button>郭富城:{{$store.state.guoFuCheng}}|{{guoFuCheng}}</button>
    <button>黎明:{{$store.state.liMing}}|{{liMing}}</button>
    <button>张学友:{{$store.state.zhangXueYou}}|{{zhangXueYou}}</button>
    <h3 @click="fn">{{arr}}</h3>

    <el-row>
      <el-button @click="open2">默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

  </div>
</template>

<script>
// 1- Vuex是一个对数据状态进行集中式管理的工具。
// import {mapState} from "vuex";
import { mapState } from "@/test/myVuex";
export default {
  name: "Study",
  data () {
    return {
      liuDeHua: 90,
      arr: [0, 1]
    }
  },
  methods: {
    fn () {
      // this.arr[0] = 100;
      // this.arr.push(1)
      // const copyArr = [...this.arr];
      // copyArr[0] = 100;
      // this.arr = copyArr;

      this.$set(this.arr, 0, 100);

      // console.log(this.arr);
    }
  },
  // 1
  // computed:mapState(["liuDeHua","liMing","guoFuCheng","zhangXueYou"])
  // 2
  computed: {
    ...mapState(["liMing", "guoFuCheng", "zhangXueYou"]),
    ...mapState({
      liu (state) {
        return state.liuDeHua;
      }
    })
  }

  // 3
  // computed:{
  //     liMing(){
  //         return this.$store.state.liMing;
  //     },
  //     guoFuCheng(){
  //         return this.$store.state.guoFuCheng;
  //     },
  //     zhangXueYou(){
  //         return this.$store.state.zhangXueYou;
  //     },
  //     liu(){
  //         return this.$store.state.liuDeHua;
  //     }
  // }


}
</script>

<style scoped>
</style>